ReactのMain Concept:4. Components and Props
https://reactjs.org/docs/components-and-props.html
Components and Props
ComponentsはUIを独立した再利用可能なピースにして、独立しておのおののピースを考えることができるようにする
component APIの詳細についてはReact.Component – React
概念的には、componentsはJSのfunctionsのようなもの
入力(props (React))をうけて、Element (React)(画面に表示するもの)を返す
Functional and Class Components
JSのfunctionのようにかけるcomponentを"fuctional"と呼ぶ
ES6のclassをつかってcomponentを作ることもできる
functionalな方もclassを使った方も同じ
classはもっといろいろなことができる
ReactのMain Concept:5. State and Lifecycleで説明する
Rendering a Component
独自のcomponentをelementにわたすことができる
ユーザ定義のcomponentを表すelementが利用されたら、そのattributeをオブジェクトとしてcomponentにわたす。このオブジェクトがprops (React)
componentの名前は大文字で書く
o<Welcome />
x<welcome />
Composing Components
componentはcomponentを呼べる
ボタン、ダイアログみたいな単位でコンポーネントを作っておけば使い回せる
Reactを既存のアプリに組み込みたいときは、Buttonのような小さなコンポーネントからつくって徐々にrootまでいくのがよい
Extracting Components:コンポーネント分割の方法
component (React)を細かく分ける
コンポーネントを分ける際に、コンポーネント内の変数名はコンポーネント自身の視点でつけ直すのがオススメ
そのまま切り出すと、外側の知識が入る
どんどん分割していくと、n段目の子要素がどんなオブジェクトを期待しているかわからなくなりそう(インタフェースに依存するようにしないと無理がある)kadoyau.icon
分割めんどくさいけど再利用できるモジュールが増えて大きなアプリ作るときはいいよ!(ButtonとかPanelとか使い回すでしょ?)
複雑なものをブレイクダウンするのもいいよ!
Props are Read-Only
pure(immutable)じゃない
Reactには一つの厳格なルールがある
すべてのReactのcomponentは与えられたpropsに対してpure functionのように振る舞わなければならない
動的に変化させたいときは次章で説明するstateを使う